<template>
  <a-modal :width="600" :title="title" v-model="visible" :maskClosable="false" :confirmLoading="loading" @ok="onSubmit" @cancel="() => (visible = false)" centered>
    <a-spin :delay="100" :spinning="loading">
      <a-form-model ref="sjhtform" :model="form" :rules="rules" :labelCol="lcol" :wrapperCol="wcol" @submit="onSubmit" @submit.native.prevent>
        <a-form-model-item label="商品名称" prop="name">
          <a-input v-model="form.name" allowClear :maxLength="50" placeholder="请输入商品名称（限50字）" />
        </a-form-model-item>
        <a-form-model-item label="商品类型" prop="type">
          <a-select v-model="form.type" placeholder="请选择商品类别" style="width: 100%">
            <a-select-option :key="1">荤菜</a-select-option>
            <a-select-option :key="2">素菜</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="商品价格" prop="price">
          <a-input-number v-model="form.price" :min="0" :max="10000" placeholder="请输入商品价格" style="width: 100%" />
        </a-form-model-item>
        <a-form-model-item label="商品数量" prop="number">
          <a-input-number v-model="form.number" :min="0" :max="10000" placeholder="请输入商品数量" style="width: 100%" />
        </a-form-model-item>
        <a-form-model-item label="维生素A" prop="vitaminA">
          <a-input-number v-model="form.vitaminA" :min="0" :max="10000" placeholder="请输入维生素A" style="width: 100%" />
        </a-form-model-item>
        <a-form-model-item label="维生素B" prop="vitaminB">
          <a-input-number v-model="form.vitaminB" :min="0" :max="10000" placeholder="请输入维生素B" style="width: 100%" />
        </a-form-model-item>
        <a-form-model-item label="维生素C" prop="vitaminC">
          <a-input-number v-model="form.vitaminC" :min="0" :max="10000" placeholder="请输入维生素C" style="width: 100%" />
        </a-form-model-item>

        <input type="submit" v-show="false" />
      </a-form-model>
    </a-spin>
  </a-modal>
</template>
<script>
import { pick } from 'lodash'
import { form } from '@/utils/mixins'
import regexp from '@/utils/validate'
import { Save } from '@/api/product'
const pickarr = ['id', 'name', 'type', 'price', 'number', 'vitaminA', 'vitaminB', 'vitaminC']
export default {
  name: 'ProductForm', //新建表单
  mixins: [form],
  data() {
    return {
      form: {},
      rules: {
        name: [{ required: true, whitespace: true, message: '请输入商品名称', trigger: 'blur' }],
        type: [{ required: true, message: '请选择商品类别', trigger: 'blur' }],
        price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' },
          { pattern: regexp.numn, message: '请输入正确的价格', trigger: 'blur' }
        ],
        number: [
          { required: true, message: '请输入商品数量', trigger: 'blur' },
          { pattern: regexp.int, message: '请输入正确的数量', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 打开新建窗口
    create() {
      this.visible = true
      if (this.loading) return
      this.reset()
      this.title = '新建商品'
      this.form = { type: 1 }
    },
    // 打开修改窗口
    update(data) {
      this.visible = true
      if (this.loading) return
      this.reset()
      this.title = `修改【${data.name}】`
      this.loading = true
      setTimeout(() => {
        this.form = pick(data, pickarr)
        this.loading = false
      }, 500)
    },
    // 点击确定
    onSubmit(e) {
      e.preventDefault()
      this.$refs.sjhtform.validate(valid => {
        if (!valid) return false
        this.loading = true
        this.submit(Save, this.form)
      })
    }
  }
}
</script>